<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel" :order="'top'" :btnalign="'right'">
    <rx-layout>
      <div slot="center">
          <a-form-model ref="form" :model="mdl" :rules="rules">
              <a-row>
                  <a-col :span="24">
                      <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.parentName','上级名称')"   v-if="mdl.parentName && mdl.parentName!=''">
                          <a-input :disabled="true" :placeholder="i18n('form.parentName','上级名称')" v-model="mdl.parentName"/>
                      </a-form-model-item>
                  </a-col>
              </a-row>
              <a-row>
                  <a-col :span="24">
                      <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.name','名称')" prop="name">
                          <a-input :placeholder="i18n('form.name','名称')" v-model="mdl.name" @change="getCityCodeByName(mdl.name)"/>
                      </a-form-model-item>
                  </a-col>
              </a-row>
              <a-row>
                  <a-col :span="24">
                      <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.cityCode','城市编码')" prop="code">
                          <a-input :placeholder="i18n('form.cityCode','城市编码')" v-model="mdl.code"/>
                      </a-form-model-item>
                  </a-col>
              </a-row>
              <a-row>
                  <a-col :span="24">
                      <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.areaCode','地区编码')" prop="areaCode">
                          <a-input :placeholder="i18n('form.areaCode','地区编码')" v-model="mdl.areaCode"/>
                      </a-form-model-item>
                  </a-col>
              </a-row>
              <a-row>
                  <a-col :span="24">
                      <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.category', '分类')" prop="category">
                          <a-radio-group buttonStyle="solid"  v-model="mdl.category">
                              <a-radio-button value="1">{{i18n('form.internal','国内')}}</a-radio-button>
                              <a-radio-button value="2">{{i18n('form.international','国际')}}</a-radio-button>
                          </a-radio-group>
                      </a-form-model-item>
                  </a-col>
              </a-row>

          </a-form-model>
      </div>
    </rx-layout>

  </rx-dialog>
</template>
<script>
  import {RxDialog, RxLayout, RxInputI18n, BaseFormModel} from "@lowcode/jpaas-common-lib";
  import FormCityApi from "@/api/form/core/formCity";
  export default {
    name: 'FormCityEdit',
    mixins:[BaseFormModel],
    props: {
      data:Object
    },
    components: {
      RxDialog,
      RxLayout,
    },
    data() {
      return {
        rules: {
              name: [{required: true, message: this.$ti18('rxForm.name','名称','','input'), trigger: 'change'}],
              code: [{required: true, message: this.i18n('form.cityCode','城市编码','input'), trigger: 'change'}],
              category: [{required: true, message: this.i18n('form.category','分类','select'), trigger: 'change'}],
              areaCode: [{required: true, message: this.i18n('form.areaCode','地区编码','input'), trigger: 'change'}],
        },
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"formCity",key);
      },
      onload_(vals){
            let data=JSON.parse(JSON.stringify( this.data));
            this.$set(this,"mdl",data);
      },
        getCityCodeByName(name){
            FormCityApi.getCityCodeByName(name).then(data =>{
                this.$set(this.mdl,"code",data);
            })

      },
      save(values,vm){
          FormCityApi.save(values).then(res =>{
              let result;
              if(!res.success){

                  this.$message.warning(res.message);
                  vm.loading=false;
                  return;
              }else{
                   result = {
                      action:"ok",
                      data:res.data,
                  }
              }
              this.$emit("action",result);//保存成功
          })

      },
      cancel(){
          let result ={
              action:"cancel",
          }
          this.$emit("action",result);
      },
    }
  }


</script>
<style scoped>
  *>>>.ant-row.ant-form-item:last-child{
      margin-bottom: 0;
  }
</style>